<div class="padding-bottom-45">

  <h3>
    <span>{{l('CreateNewRole')}}</span>
  </h3>

  <form nz-form #validateForm="ngForm" (ngSubmit)="save()">

    <!-- 角色名称 -->
    <nz-form-item>
      <nz-form-control nzHasFeedback>
        <input nz-input name="name" #name="ngModel" [(ngModel)]="role.name" [placeholder]="l('Name')" required>
        <nz-form-explain *ngIf="name.control.dirty&&name.control.errors">
          <ng-container *ngIf="name.control.hasError('required')">{{l('CanNotNull')}}</ng-container>
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item>

    <!-- 角色展示名称 -->
    <nz-form-item>
      <nz-form-control nzHasFeedback>
        <input nz-input name="displayName" #displayName="ngModel" [(ngModel)]="role.displayName" [placeholder]="l('DisplayName')"
          required>
        <nz-form-explain *ngIf="displayName.control.dirty&&displayName.control.errors">
          <ng-container *ngIf="displayName.control.hasError('required')">{{l('CanNotNull')}}</ng-container>
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item>

    <!-- 角色介绍 -->
    <nz-form-item>
      <nz-form-control>
        <input nz-input name="description" [(ngModel)]="role.description" [placeholder]="l('RoleDescription')">
      </nz-form-control>
    </nz-form-item>

    <!-- 权限组 -->
    <nz-form-item>
      <nz-checkbox-group name="permissions" [(ngModel)]="permissionList" *ngIf="permissionList.length!=0"></nz-checkbox-group>
    </nz-form-item>

    <!-- 功能按钮 -->
    <div class="custom-modal-footer">
      <div class="custom-modal-footter-group">
        <button nz-button type="button" [disabled]="saving" (click)="close()">
          {{l("Cancel")}}
        </button>
        <button nz-button [nzType]="'primary'" type="submit" [disabled]="!validateForm.valid||saving">
          {{l("Save")}}
        </button>
      </div>
    </div>

  </form>
</div>
